<template>
  <div class="wrapper">
    <vHeader></vHeader><!--头部-->
    <vSidebar></vSidebar><!--菜单栏-->
    <div class="content-box" :class="{'content-collapse':collapse}">
      <div class="content">
        <transition name="move" mode="out-in">
          <keep-alive :include="tagsList">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
  import vHeader from './Header.vue'
  import vSidebar from './Sidebar.vue'
  import bus from './bus';

  export default {
    components: {
      vHeader,vSidebar
    },
    data(){
      return {
        tagsList: [],
        collapse: false
      }
    },
    created(){
      bus.$on('collapse', msg => {
        this.collapse = msg;
      });
      bus.$on('tags', msg => {
        let arr = [];
        for(let i = 0, len = msg.length; i < len; i ++){
          msg[i].name && arr.push(msg[i].name);
        }
        this.tagsList = arr;
      })
    }
  }
</script>

<style scoped>
  .content-box{
    min-width: 960px;
    position: absolute;
    left: 200px;
    right: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
    -webkit-transition: left .3s ease-in-out;
    -o-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
    background: #f0f0f0;
  }
  .content-collapse{
    left: 65px;
  }
  .content {
    width: auto;
    padding: 20px;
  }
</style>
